<!-- 组件说明 -->
<template>
  <div :class="ifTransparent ? 'goback transparent' : 'goback'">
    <img
      @click.stop="goback"
      class="gobackImg"
      src="@/assets/imgNews/goBack.png"
    />
    <p class="center" v-if="title">{{ title }}</p>
    <p class="rightTopGo" @click="rightTopGo" v-if="rightTop.title">
      {{ rightTop.title }}
    </p>
  </div>
</template>

<script>
//import x from ''
export default {
  name: "goback",
  props: {
    title: {
      type: String,
      default: ""
    },
    targetUrl: {
      type: String,
      default: ""
    },
    ifTransparent: {
      type: Boolean,
      default: true
    },
    rightTop: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  methods: {
    goback() {
      if(this.targetUrl){
        this.$router.push({path:this.targetUrl, replace: true});
        return;
      }
      this.$router.go(-1);
    },
    rightTopGo() {
      this.$router.push({ name: this.rightTop.name });
    }
  },
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../assets/css/common.less");

.goback {
  position: fixed;
  left: 0;
  top: 0;
  width: 7.2rem;
  height: 0.44rem;
  padding: 0.7rem 0 0.3rem;
  background: #fff;
  z-index: 1000;
  cursor: pointer;
  pointer-events: none;
  &.transparent {
    background: transparent;
  }
  .gobackImg {
    position: absolute;
    left: 0.3rem;
    top: 0.7rem;
    width: 0.44rem;
    height: 0.44rem;
    object-fit: cover;
    z-index: 10001;
    pointer-events: visiblepainted;
  }
  p.center {
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 100%;
    font-size: 0.28rem;

    font-weight: bold;
    height: 0.44rem;
    line-height: 0.44rem;
    color: #333333;
    opacity: 1;
    text-align: center;
    z-index: 1000;
  }
  p.rightTopGo {
    position: absolute;
    right: 0.3rem;
    top: 0.7rem;
    font-size: 0.28rem;

    font-weight: bold;
    height: 0.44rem;
    line-height: 0.44rem;
    color: #333333;
    opacity: 1;
    text-align: center;
    z-index: 1001;
    pointer-events: visiblepainted;
  }
}
</style>

<style lang="less">
//@import url()
</style>
